<template>
  <a-date-picker :value="modelValue" :open="openValue" :mode="modeValue" :format="format" :valueFormat="format" :placeholder="placeholder" :disabled="disabled" @openChange="openChange" @panelChange="panelChange" @change="changeValue" />
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'DateYear',
  props: {
    modelValue: String,
    format: {
      type: String,
      default: 'YYYY',
    },
    placeholder: {
      type: String,
      default: '选择年份',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  emits: [
    'update:modelValue',
    'change'
  ],
  data() {
    return {
      openValue: false,
      modeValue: 'year',
    }
  },
  computed: {
  },
  methods: {
    openChange(status) {
      if (status) {
        this.modeValue = 'year'
      }
      this.openValue = status
    },
    panelChange(value, mode) {
      if ('decade' === mode) {
        this.modeValue = 'decade'
      } else if ('year' === mode) {
        this.modeValue = 'year'
      } else {
        this.$emit('update:modelValue', value.format(this.format))
        this.$emit('change', value.format(this.format))
        this.openValue = false
      }
    },
    changeValue(date, dateString) {
      this.$emit('update:modelValue', null)
      this.$emit('change', null)
    },
  },
  mounted() {
  }
})
</script>

<style scoped lang="less">

</style>
